<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
    <!--表单开始-->
    <a-form ref="formRef" :model="formState" layout="vertical" :rules="RULES">
      <a-row :gutter="12">
        <a-col :span="12">
          <a-form-item label="登录账号" field="account">
            <a-input v-model="formState.account" allow-clear placeholder="请填写登录账号" :disabled="isUpdate"/>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="人员姓名" field="name">
            <a-input v-model="formState.name" allow-clear placeholder="请填写人员姓名"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="所属机构" field="organ.code" :rules="RULES.organ.code">
            <a-tree-select v-model="formState.organ.code" :field-names="extendCtr.fieldNames" :data="extendCtr.organTree" placeholder="请选择操作员所属机构" @change="loadDeptList"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="所属部门" field="dept.code" :rules="RULES.dept.code">
            <a-tree-select v-model="formState.dept.code" :field-names="extendCtr.fieldNames" :data="extendCtr.deptTree" placeholder="请选择所属部门"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="人员性别" field="sex">
            <smart-dict v-model="formState.sex" :url="DictOptions.Sex" is-radio/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="账号状态" field="state">
            <smart-dict v-model="formState.state" :url="DictOptions.AccountState" is-radio/>
          </a-form-item>
        </a-col>
        <a-divider orientation="left">扩展信息</a-divider>
        <a-col :span="6">
          <a-form-item label="联系电话" field="phoneNumber">
            <a-input v-model="formState.phoneNumber" allow-clear placeholder="联系电话"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="电子邮箱" field="email">
            <a-input v-model="formState.email" allow-clear placeholder="电子邮箱"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="联系微信" field="wechat">
            <a-input v-model="formState.wechat" allow-clear placeholder="联系微信"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="联系QQ" field="qq">
            <a-input v-model="formState.qq" allow-clear placeholder="联系QQ"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[12,12]">
        <a-divider orientation="left">数据授权</a-divider>
        <a-col :span="24">
          <a-form-item label="授权方式" field="dataScope.scopeType" :rules="RULES.dataScope.scopeType">
            <smart-dict v-model="formState.dataScope.scopeType" :url="DictOptions.ScopeType" is-radio/>
          </a-form-item>
        </a-col>
        <a-col v-if="formState.dataScope.scopeType==='CUSTOM'" :span="24">
          <a-form-item label="明细机构" field="dataScope.organCodes" :rules="RULES.dataScope.organCodes">
            <a-checkbox-group v-model="formState.dataScope.organCodes" :options="extendCtr.organList"/>
          </a-form-item>
        </a-col>

        <a-divider orientation="left">操作授权</a-divider>
        <a-col :span="24">
          <a-form-item label="角色分配" field="roleCodes">
            <a-checkbox-group v-model="formState.roleCodes" :options="extendCtr.roleList"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <!--表单结束-->
  </a-drawer>
</template>

<script lang="ts" setup>
import {reactive} from 'vue'
import {EditDrawer} from '@/libs/core'
import {DictOptions, SystemOptions} from '@/libs/options'
import {ACCOUNT_EDIT} from "../resource/form";
import {SystemHttp} from '../resource/http'
import {EmptyUtil, RequestUtil, TreeUtil} from "@/utils";

const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])
const {BODY, RULES} = ACCOUNT_EDIT
const {addAccount, updateAccount} = SystemHttp
const config = {tplRecord: BODY, rawRecord: props.record, rowKey: 'id', emit}
const service = new EditDrawer(config).setAddRequest(addAccount).setUpdateRequest(updateAccount)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '修改账号' : '新建账号'

// 定一些表单需要用到的扩展数据
const extendCtr = reactive({
  fieldNames: {key: 'value', title: 'label', children: 'children'},
  deptTree: [],
  organTree: [],
  organList: [],
  roleList: []
})
//加载角色列表
const loadRole = async () => {
  const {data} = await RequestUtil.getAjax(SystemOptions.RoleOptions)
  extendCtr.roleList = data
}
const loadOrgan = async () => {
  const {data} = await RequestUtil.getAjax(SystemOptions.OrganTreeOptions)
  extendCtr.organList = data
  extendCtr.organTree = TreeUtil.listToTreeNode(data)
}
//动态加载部门数据
const loadDeptList = async (organCode) => {
  if (EmptyUtil.isEmptyString(organCode)) {
    extendCtr.deptTree = []
    formState.value.dept.code = ''
    return
  }
  const url = SystemOptions.DeptTreeOptions(organCode)
  const {data} = await RequestUtil.getAjax(url)
  extendCtr.deptTree = TreeUtil.listToTreeNode(data, '0')
  formState.value.dept.code = ''
}

// 特殊处理一下初始化数据
const init = async () => {
  await loadRole()
  await loadOrgan()
  if (props.record?.organ !== undefined) {
    await loadDeptList(props.record.organ.code)
    formState.value.dept.code = props.record.dept.code
  }
  // 修正两个渲染值
  // eslint-disable-next-line vue/no-setup-props-destructure
  if (isUpdate) formState.value.dataScope.scopeType = props.record.dataScope?.scopeType?.value
}
init()
</script>
